<template>
	<div class="slide">
		<div class="img">
			<img src="../../../public/favicon.ico"/>电商后台管理
		</div>
		<el-row class="tac">
		    <el-col>
		      <el-menu
		        active-text-color="#ffd04b"
		        background-color="#545c64"
		        class="el-menu-vertical-demo"
		        default-active="2"
		        text-color="#fff"
		        @open="handleOpen"
		        @close="handleClose"
				unique-opened
		      >
		        <el-sub-menu index="1">
		          <template #title>
		            <el-icon><List /></el-icon>
		            <span>订单管理</span>
		          </template>
				  <router-link to="/home/putondd">
					  <el-menu-item index="1-1">普通订单</el-menu-item>
				  </router-link>
		            <router-link to="/home/miaodd">
						<el-menu-item index="1-2">秒杀订单</el-menu-item>
					</router-link>
		        </el-sub-menu>
		        <el-sub-menu index="2">
		          <template #title>
		            <el-icon><Shop /></el-icon>
		            <span>商品管理</span>
		          </template>
				  <router-link to="/home/putonshop">
					  <el-menu-item index="2-1">普通商品</el-menu-item>
				  </router-link>
				  <router-link to="/home/miaoshop">
					  <el-menu-item index="2-2">秒杀商品</el-menu-item>
				  </router-link>
				  <router-link to="/home/dayshop">
					  <el-menu-item index="2-3">今日推荐</el-menu-item>
				  </router-link>
				  <router-link to="/home/goryshop">
					  <el-menu-item index="2-4">商品分类</el-menu-item>
				  </router-link>
		        </el-sub-menu>
				<el-sub-menu index="3">
				  <template #title>
				    <el-icon><Avatar /></el-icon>
				    <span>店长管理</span>
				  </template>
				  <router-link to="/home/managerlist">
					  <el-menu-item index="3-1">店长列表</el-menu-item>
				  </router-link>
				    <router-link to="/home/addmanager">
						<el-menu-item index="3-2">店长申请审批列表</el-menu-item>
					</router-link>
					<router-link to="/home/managerdd">
						<el-menu-item index="3-3">店长订单</el-menu-item>
					</router-link>
				</el-sub-menu>
				<el-sub-menu index="4">
				  <template #title>
				    <el-icon><Ticket /></el-icon>
				    <span>财务管理</span>
				  </template>
				  <router-link to="/home/payinfo">
					  <el-menu-item index="4-1">交易明细</el-menu-item>
				  </router-link>
				  <router-link to="/home/paylist">
					  <el-menu-item index="4-2">财务对账单</el-menu-item>
				  </router-link>
				</el-sub-menu>
				<el-sub-menu index="5">
				  <template #title>
				    <el-icon><Tools /></el-icon>
				    <span>基础管理</span>
				  </template>
				  <router-link to="/home/datachart">
					  <el-menu-item index="5-1">数据统计</el-menu-item>
				  </router-link>
				</el-sub-menu>
		      </el-menu>
		    </el-col>
		  </el-row>
	</div>
</template>

<script lang="ts" setup>
import {
  List,
  Shop,
  Avatar,
  Ticket,
  Tools
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
	.slide{
		color: white;
	}
	.img{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}
	.el-menu{
		border-right: none;
	}
	a{
		text-decoration: none;
	}
</style>